<template>
  <el-container class="home_content">
    <el-header>
      <homeHeader></homeHeader>
    </el-header>
    <el-container>
      <el-aside :width="isCollapse === true ? '64px' : '200px'">
        <homeAside @getAsideWidth="getAsideWidth"></homeAside>
      </el-aside>
      <el-main>
        <breadCrumb></breadCrumb>
        <transition name="fade" mode="out-in">
          <el-card>
            <router-view></router-view>
          </el-card>
        </transition>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import homeHeader from './components/Homeheader.vue';
import homeAside from './components/Homeaside.vue';
import breadCrumb from '../../components/breadCrumb/index.vue';

export default {
  name: 'Home',
  components: {
    homeHeader,
    homeAside,
    breadCrumb,
  },
  created() {},
  data() {
    return {
      isCollapse: false,
    };
  },
  methods: {
    getAsideWidth(e) {
      this.isCollapse = e;
    },
  },
};
</script>

<style lang='less'>
.home_content {
  height: 100vh;
}
.el-header {
  background: #373d41;
}
.el-aside {
  background: #333744;
}
.el-main {
  background: #eaedf1;
  height: calc(100vh - 60px);
  overflow-y: scroll;
}
.el-card {
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15) !important;
}
</style>
